<template>
  <div class="chart"
       v-show="showUI">
    <i class="el-icon-close"
       @click="onClickClose"></i>
    <div class="no-data"
         v-show="Object.keys(hourChartData).length===0">暂无数据</div>
    <div id="sChart"
         ref="sChart"
         class="bar-chart"
         v-show="Object.keys(hourChartData).length>0"></div>
    <el-date-picker class="s-date"
                    v-model="startTime"
                    type="date"
                    :clearable="false"
                    @change="onChangeDate"
                    placeholder="选择日期">
    </el-date-picker>
    <el-date-picker class="e-date"
                    v-model="endTime"
                    type="date"
                    :clearable="false"
                    @change="onChangeDate"
                    placeholder="选择日期">
    </el-date-picker>
    <p class="time">时间段</p>
    <p class="p-time">{{this.startHour}}点 ~ {{this.endHour}}点</p>
    <el-time-picker class="s-time"
                    is-range
                    arrow-control
                    v-model="value"
                    format="HH"
                    :clearable="false"
                    @change="onChangeTime"
                    popper-class="singleTime"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
    </el-time-picker>
    <!-- <el-select v-model="value"
    
    size="mini"
               placeholder="请选择">
      <el-option v-for="item in options"
                 :key="item"
                 :label="item"
                 :value="item">
      </el-option>
    </el-select> -->
    <!--     
  <el-button 
    size="mini" class="export" type="success">导出表格</el-button> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
var myChart = null
var option = {
  animation: false,
  color: ['#4992ff', '#7cffb2'],
  title: {
    text: '演示版-日用电量对比',
    bottom: '5%',
    textStyle: {
      color: '#fff',
      fontSize: '0.32rem',
    },

    x: 'center',
    y: 'bottom',
  },
  legend: {
    top: 12,
    bottom: 8,
    left: '50px',
    textStyle: {
      fontSize: 14,//字体大小
      color: '#ffffff'//字体颜色
    },

    x: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {            // Use axis to trigger tooltip
      type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  grid: {
    bottom: '17%',
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#24a8ac'
        }
      },
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#ffffff'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#24a8ac'
        }
      },
    }
  ],
};
import ajax from "@/utils/ajax";
export default {
  name: "index",
  props: {
    showUI: {
      type: Boolean,
      default: false
    },
    areaId: {
      type: Number,
      default: 0
    },
    filialeOrOrgan: {
      type: String,
      default: ''
    },
    dataIndex: {
      type: Number,
      default: 0
    },
    titleName: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      hourChartData: {},//数据表
      startHour: 8,//开始时间
      endHour: 18,//结束时间
      startTime: new Date(),//开始日期
      endTime: new Date(),//结束日期
      strStartTine: '',
      strEndTime: '',
      value: [new Date(2020, 1, 1, 8, 0), new Date(2020, 1, 1, 18, 0)],
      selectLoad: false,
    }
  },
  mounted () {
    myChart = echarts.init(document.getElementById('sChart'));
    // myChart.on('click',(params)=>{
    //     this.showHoursData = true
    //     console.log('图表点击',params)
    // })
    myChart.setOption(option);
    myChart.on('legendselectchanged', (params) => {
      console.log('点击', params)
      params.selected[params.name] = true
      option.legend.selected = params.selected
      myChart.setOption(option, true);
      this.$refs.st.focus()
    })
  },
  methods: {
    // 对数据进行处理
    dealData () {
      myChart.clear()
      let series = []
      let tList = [this.strStartTine, this.strEndTime]
      tList.forEach(key => {
        console.log(key)
        let obj = {}
        obj.name = key
        obj.type = 'bar'
        let list = []
        for (let d in this.hourChartData[key]) {
          list.push(this.hourChartData[key][d])
        }
        obj.data = list
        series.push(obj)
      });
      option.series = series
      option.title.text = this.titleName + '-日用电量对比'

      let time = []
      for (let i = this.startHour; i <= this.endHour; i++) {
        time.push(i);
      }

      let axisList = [{
        type: 'category',
        axisTick: { show: false },
        data: time,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#24a8ac'
          }
        },
      }]
      option.xAxis = axisList

      myChart.setOption(option, true);
    },
    dateFormat (fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
      }
      return fmt;
    },
    onClickClose () {
      this.$emit("update:showUI", false)
      //   this.showUI = false
    },//根据网点获取用电量统计数据
    getElectricQuantityByDay (id, startTime, endTime, startHour, endHour, type) {
      let self = this;
      ajax.post({
        url: self.$API.getElectricQuantityByDay,
        data: {
          id: id,
          firstTime: startTime,
          secondTime: endTime,
          startHour,
          endHour,
          type
        },
        success: (res) => {
          this.hourChartData = res.data;
          this.dealData()
        },
        error: (err) => {
          self.$message.error(err.message);
          console.log(err);
        },
      });
    },
    onChangeDate () {
      this.strStartTine = this.dateFormat('YYYY-mm-dd', this.startTime)
      this.strEndTime = this.dateFormat('YYYY-mm-dd', this.endTime)
      this.getElectricQuantityByDay(this.areaId, this.strStartTine, this.strEndTime, this.startHour, this.endHour, this.filialeOrOrgan)
    },
    onChangeTime () {
      this.startHour = this.value[0].getHours()
      this.endHour = this.value[1].getHours()
      this.getElectricQuantityByDay(this.areaId, this.strStartTine, this.strEndTime, this.startHour, this.endHour, this.filialeOrOrgan)
    }
  },
  watch: {
    showUI (val) {
      if (val) {
        let weeks = new Date().getDay()//获取今天周几
        if (weeks === 0) {
          weeks = 7
        }
        let day = weeks - this.dataIndex - 1
        this.startTime = new Date(new Date().getTime() - (day * 86400000))
        this.endTime = new Date(this.startTime.getTime() - 86400000)
        this.strStartTine = this.dateFormat('YYYY-mm-dd', this.startTime)
        this.strEndTime = this.dateFormat('YYYY-mm-dd', this.endTime)
        this.value = [new Date(2020, 1, 1, 8, 0), new Date(2020, 1, 1, 18, 0)],
          this.startHour = 8
        this.endHour = 18
        this.getElectricQuantityByDay(this.areaId, this.strStartTine, this.strEndTime, this.startHour, this.endHour, this.filialeOrOrgan)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.chart {
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5), 0 3px 15px 0 rgba(30, 144, 255, 0.4) inset;
  background-image: linear-gradient(
    30deg,
    rgba(22, 33, 77, 1) 0%,
    rgba(31, 47, 109, 1) 100%
  );
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;

  .el-icon-close {
    z-index: 9999;
    position: absolute;
    right: 0;
    top: 6px;
    width: 30px;
    font-size: 30px;
    text-align: right;
  }

  .time {
    position: absolute;
    right: 175px;
    top: 12px;
  }

  .el-select {
    position: absolute;
    right: 130px;
    top: 6px;
    width: 100px;
  }

  .s-date {
    opacity: 0;
    position: absolute;
    top: 6px;
    left: 50px;
    width: 115px;

    >>>input {
      cursor: pointer;
    }
  }

  .e-date {
    opacity: 0;
    position: absolute;
    top: 6px;
    left: 170px;
    width: 115px;

    >>>input {
      cursor: pointer;
    }
  }

  .p-time {
    position: absolute;
    right: 30px;
    top: 6px;
    width: 140px;
    text-align: center;
    line-height: 30px;
    text-decoration: underline;
  }

  .s-time {
    opacity: 0;
    position: absolute;
    right: 30px;
    top: 6px;
    width: 140px;

    >>>input {
      cursor: pointer;
    }
  }

  .export {
    position: absolute;
    right: 35px;
    top: 6px;
    width: 85px;
    text-align: center;
  }
}

.bar-chart {
  width: 5.66rem;
  height: 3.25rem;
}

.no-data {
  text-align: center;
  height: 3.25rem;
  line-height: 3.52rem;
}
</style>
<style lang="stylus">
.singleTime {
  .el-time-spinner {
    .el-time-spinner__wrapper:nth-child(2) {
      display: none;
    }
  }
}
@media screen and (max-width: 1600px) {
  .time,.p-time{display:none}
   
}
</style>